import React, { PureComponent } from 'react'
import store from '../../store'
import { connect } from 'react-redux'
import { changeIncreame } from '../../store/counter/actionCreators'

class Detail extends PureComponent {
  constructor(){
    super()
    this.state = {
      // counter:store.getState().counter
    }
  }
  addHandle(){
    // 接收一个对象
    // this.setState({
    //   counter1:this.state.counter1+1
    // })

    //接收一个回调函数
    // this.setState((state,props)=>{
    //   console.log(state,props)
    //   return {
    //     counter:state.counter+1
    //   }
    // })

    //接收一个对象和回调函数，回调函数会在state更新完成后执行
    //   this.setState({
    //     counter:this.state.counter+1
    //   },(state)=>{
    //     console.log(this.state.counter,'state')
    // })
    this.props.add()
  }
  componentDidUpdate(){
    this.setState({
      counter:store.getState().counter
    })
  }
  render() {
    console.log('detail render---')
    const {counter} = this.props
    return (
      <div>
        <h3>detail counter:{counter}</h3>
        <button onClick={e =>{this.addHandle()}}>+1</button>
      </div>
    )
  }
}
const mapStateToProps = (state) =>({
  counter:state.countInfo.counter
})
const mapDispatchToProps = (dispatch) =>({
  add(){
    dispatch(changeIncreame(20))
  }
})
export default connect(mapStateToProps,mapDispatchToProps)(Detail)
